<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="./css/mui.min.css">
    	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_0luobrse2as2lnmi.css"/>
			

		<style>
		li{list-style: none;}
		.mui-bar-nav{
			line-height: 44px;
			bottom: 0px;
		}
		.iconfont{
			font-size: 20px;
		}
		.icon-dingwei{
			float: right;
		}
		.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			p img {
				max-width: 100%;
				height: auto;
			}
			#scroller .me{
	padding:0px;
	border-top:none;
}
#scroller .me .me-pic{
	width: 100%;
	height:190px;
	background:url(./images/travel01.png);
	position: relative;
}
#scroller .me .me-pic img{
	position: absolute;
	bottom: 0px;
	left: 39%;
	border-radius: 50px;
}
#scroller .me .me-pic .for{
	position: absolute;
	bottom: -30px;
	left: 50%;
	font-weight: 600;
}
#scroller .bottom{
	width: 100%;
	margin-top:36px;
	margin-left: 5px;
}
#scroller .bottom i{
	display: block;
	margin: 10px 0px;
	font-weight: normal;
	font-size: 18px;
}
#bcid {
	height:520px;
	top:44px;
	width:100%;
	position: absolute;
	display: none;
}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<i class="iconfont icon-qrcode"  id="barcode.html" onclick="clicked(this.id)" ></i>
			<script type="text/javascript">
				function clicked(id){
					location.href=id;
				};
			</script>
			
			<i class="iconfont icon-dingwei" id="maps.html" onclick="click2(this.id)"></i>
			<script type="text/javascript">
				function click2(id){
					location.href=id;
				};
			</script>
		</header>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group" style="height: 520px;">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<style type="text/css">
									.mui-badge{
										background:#c00;color:white;
										position: absolute;
										left: 21px;
										top:6px;
									}
								</style>
								<ul class="mui-table-view" id="mui-table-view">
									
								</ul>
								
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div id="mui-table-view2">
									</div>
								</div>
							</div>
						</div>

					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-loading">
									<div id="mui-table-view3">
										
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div id="scroller">
									
								</div>
								<div class="mui-content">
									<h4>旅游街拍</h4>
									<ul class="mui-table-view mui-table-view-chevron">
										<li id="switch" class="mui-table-view-cell">
											定时轮播
											<div class="mui-switch">
												<div class="mui-switch-handle"></div>
											</div>
										</li>
									</ul>
									<div id="slider" class="mui-slider">
										<div class="mui-slider-group mui-slider-loop class="mui-content-padded"">
											<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="./images/city06.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">静静看这世界</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="./images/city05.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">幸福就是可以一起睡觉</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="./images/city04.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="./images/city03.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">Color of SIP CBD</p>
												</a>
											</div>
											<div class="mui-slider-item">
												<a href="#">
													<img src="./images/city06.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">静静看这世界</p>
												</a>
											</div>
											<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
											<div class="mui-slider-item mui-slider-item-duplicate">
												<a href="#">
													<img src="./images/city05.png" data-preview-src="" data-preview-group="1">
													<p class="mui-slider-title">幸福就是可以一起睡觉</p>
												</a>
											</div>
										</div>
										<div class="mui-slider-indicator mui-text-right">
											<div class="mui-indicator mui-active"></div>
											<div class="mui-indicator"></div>
											<div class="mui-indicator"></div>
											<div class="mui-indicator"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<nav onclick="sss()" class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-control-item mui-active" href="#item1mobile">
				<span class="mui-icon"><i class="iconfont icon-project" style="font-size: 22px;"></i></span>
				<span class="mui-tab-label">project</span>
			</a>
			<a class="mui-tab-item mui-control-item" href="#item2mobile">
				<span class="mui-icon"><i class="iconfont icon-skill" style="font-size: 18px;"></i></span>
				<span class="mui-tab-label">skill</span>
			</a>
			<a class="mui-tab-item mui-control-item" href="#item3mobile">
				<span class="mui-icon"><i class="iconfont icon-work"></i></span>
				<span class="mui-tab-label">work</span>
			</a>
			<a class="mui-tab-item mui-control-item" href="#item4mobile">
				<span class="mui-icon"><i class="iconfont icon-me"></i></span>
				<span class="mui-tab-label">me</span>
			</a>
		</nav>
		<script src="./js/mui.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
		
		<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.previewImage();
			mui.ajax('http://www.lz94.online/api/project.php',{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；	              
					success:function(data){
		              var html = "";
		              for(var i=0;i<data.length;i++){
		                  html +='<div class="mui-card" >'+
		                  		'<h5 style="line-height:24px;text-indent:10px;color:#000;">' + data[i].name + '</h5>'+
								'<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url('+data[i].pic+')"></div>'+
								'<div class="mui-card-content">'+
									'<div class="mui-card-content-inner" >'+
										'<p style="color: #333;">Posted on January 18, '+(2016+i)+'</p>'+
										'<p style="color: #333;">网址：'+data[i].url+'</p>'+
										'<p style="color: #333;">详细情况：'+data[i].description+'</p>'+
										'<p style="color: #333;"> 处理问题：'+data[i].detail+'</p>'+
										'<p style="color: #333;">技术:'+data[i].tech+'</p>'+
									'</div>'+
								'</div>'+
								'<div class="mui-card-footer">'+
									'<a class="mui-card-link" style="position:relative;">Like<span class="mui-badge" id="mui-badge">3</span></a>'+
									'<a class="mui-card-link-read">Read more</a>'+
								'</div>'+
							'</div>';
		              }
					document.getElementById("mui-table-view").innerHTML=html;
				}
			});
			mui.ajax('http://www.lz94.online/api/skill.php',{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；	              
					success:function(data){
		              var html = "";
		              for(var i=0;i<data.length;i++){
		                  html +='<li class="mui-table-view-cell mui-collapse">'+
						'<a class="mui-navigate-right" href="javascript:;">'+'<img src="'+data[i].pic+'" style="width:20px;height:20px;position:relative;bottom:-5px;">&nbsp;&nbsp;&nbsp;'+'<span>'+data[i].category+'</span></a>'+
						 '<div class="mui-collapse-content">'+
		                  '<div>'+
		                  '<span>技术：</span><span>'+data[i].name+'</span>'+
		                  '</div>'+
		                  '<div>'+
		                  '<div><span>时间：</span><span>'+data[i].time+'</span></div>'+
		                  '<div><span>程度：</span><span style="display:inline-block;width:40px;height:16px; overflow:hidden;">'+
                  			'<span style="width:80px;height:14px;display:block;"><img src="./images/star.png" style="margin-left:'+8*(data[i].star-5)+'px;height:12px;"></span></span></div>' +   
		                  '</div>'+
		               '</div>'+
						'</li>'
		              }
					document.getElementById("mui-table-view2").innerHTML=html;
				}
			})
			mui.ajax('http://www.lz94.online/api/work.php',{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；	              
					success:function(data){
		             	 var html = "";
		               	for(var i=0;i<data.length;i++){
				            html +='<div class="mui-card" >'+
		                  		'<h5 style="line-height:24px;text-indent:10px;color:#000;">所在单位：'+data[i].name+'</h5>'+
								'<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url('+data[i].pic+')"></div>'+
								'<div class="mui-card-content">'+
									'<div class="mui-card-content-inner" >'+
										'<div class="work-posts">'+
								            '<span>岗位：</span><span>'+data[i].posts+'</span>'+
														'</div>'+
														'<div class="work-time">'+
								            '<span>任职时间：</span><span>'+data[i].time+'</span>'+
														'</div>'+
														'<div class="work-peoples">'+
								            '<span>人数：</span><span>'+data[i].people+'</span>'+
										'</div>'+
										'<div class="work-project">'+
										'<span>项目：</span>'+data[i].projects+'</span>'+
										'</div>'+
									'</div>'+
								'</div>'+
							'</div>';
				          }
					document.getElementById("mui-table-view3").innerHTML=html;
				}
			})
			mui.ajax('http://www.lz94.online/api/me.php',{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；	              
					success:function(data){
		             	 var html = "";
		              	console.log(data)
		               	for(var i=0;i<data.length;i++){
				            html +='<li class="me">'+
				              	'<div class="me-pic">'+
				               		 '<img src="./images/pic.jpg"  style="width:100px;height:100px; border-radius:100px;">'+
				               		 '<div class="for">'+data[0].name+'</div>'+
				            	'</div>'+ 
				            '</li>'+
				            '<li class="bottom">'+
				                '<div><i class="iconfont icon-me">&nbsp;&nbsp;'+data[0].sex+ "&nbsp;&nbsp;"+data[0].age + "岁&nbsp;&nbsp;" +"滁州学院"+
				                '<i class="iconfont icon-phone">&nbsp;&nbsp;'+data[0].phone+'</i>'+
				                '<i class="iconfont icon-jiaoyujingli3">&nbsp;&nbsp;'+data[0].zhuanye+ 
				                '<i class="iconfont icon-jiaoyujingli2">&nbsp;&nbsp;'+data[0].ben+
				                '<i class="iconfont icon-zaixiaojingli">&nbsp;&nbsp;'+data[0].born+
				                '<i class="iconfont icon-techangaihao">&nbsp;&nbsp;'+"旅游"+
				                '<i class="iconfont">个性签名：&nbsp;&nbsp;'+data[0].qm+
				                '</div>'+
				            '</li>';
				          }
					document.getElementById("scroller").innerHTML=html;
				}
			})


			mui.init({
				swipeBack: false
			});
			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			})(mui);
			
			
			
			
//			var scan = null;
//			function onmarked( type, result ) {
//				var text = '未知: ';
//				switch(type){
//					case plus.barcode.QR:
//					text = 'QR: ';
//					break;
//					case plus.barcode.EAN13:
//					text = 'EAN13: ';
//					break;
//					case plus.barcode.EAN8:
//					text = 'EAN8: ';
//					break;
//				}
//				alert( text+result );
//			}
//			function startRecognize() {
//				$('#bcid').css('display','block');
//				scan = new plus.barcode.Barcode('bcid');
//				scan.onmarked = onmarked; 
//				scan.start();
//			}

		</script>
		<script type="text/javascript">
			mui('.mui-card-link').on('tap',function(){
				mui('#mui-badge').innerHTML='1';
			})
		</script>

	</body>

</html>